<Radar bind:ready>
<div class="showapath">  
  <div class="arrow">
  {#if ready}
      <SetOfIcons
        {pointList}
        {color}
        {layerName}
      />
    {/if}
  </div>
  <div class="atlas">
    <div class="thumbnail">
      <LazyImage background={false} border={false} aspectRatio={1} src="assets/images/renders/thumbnail-{layerName}.jpg" alt="thumbnail for {layerName}" style="width: 100%;display: block;" />
    </div>
    <svg 
      viewBox="0 0 {viewWidth} {viewHeight}"
      class="pathArrow"
      >
      <defs>
        <marker 
          id={'head' + uniqueId}
          fill={color}
          viewBox="0 0 10 10" 
          refX="5" 
          refY="5"
          markerWidth="5" 
          markerHeight="5"
          orient="auto-start-reverse"
        >
          <circle cx="5" cy="5" r="3"/>
        </marker>
        <marker id={'arrow' + uniqueId}
          fill={color} 
          viewBox="0 0 10 10" 
          refX="5" 
          refY="5"
          markerWidth="3"
          markerHeight="3"
          orient="auto-start-reverse"
        >
          <path d="M 0 0 L 10 5 L 0 10 z" />
        </marker>
      </defs>
      <path
        ref:clickPath
        d={path_d}
        stroke={color}
        stroke-width="3"
        fill="transparent"
        marker-end="url(#{'arrow' + uniqueId})"
        marker-start="url(#{'head' + uniqueId})"
      />
    </svg>
  </div>
</div>
</Radar>
<script>
export default {
  components: { 
    Radar: "../library/Radar.html",
    SetOfIcons: "../SetOfIcons.html",
    LazyImage: "../library/LazyImage.html"
  },
  data() {
    return {
      gridSize: 1,
      viewWidth: 160,
      viewHeight: 160,
      height: 160,
      color: '#ff6600',
      uniqueId: Math.random(),
      pointList: []
    }
  },
  computed: {
    numIcons: ({pointList}) => pointList.length,
    edgeLength: ({viewWidth, viewHeight}) => {
      if(viewWidth && viewHeight){
        return Math.min(viewWidth, viewHeight)
      }
      return 0
    },
    topLeft: ({viewWidth, viewHeight, edgeLength}) => {
      if(viewWidth && viewHeight){
        return [(viewWidth - edgeLength) / 2, (viewHeight - edgeLength) / 2]
      }
      return [0,0]
    },
    path_d: ({pointList, topLeft, edgeLength}) => {
      // need to adjust for size
      let path_d = [];
      let d = "M";
      pointList.forEach(function(point){
          d = d + (point[0]) * edgeLength  + 
            " " + (point[1]) * edgeLength + " L"
      });
      path_d.push(d.substring(0, d.length - 2))
      return path_d
    },
  },
}
</script>

<style>

svg {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.thumbnail {
  opacity: .2;
  position: relative;
}
.atlas {
  position: relative;
  max-width: 120px;
  margin-top: 16px;
}
.pathArrow {
  opacity: 1;
}
.column {
  position: relative;
}
.set-of-icons {
  position: relative;
}
@media(min-width: 600px) {
  .showapath {
    display: grid; grid-template-columns: 1fr 120px; 
    grid-gap: 20px;
  }
  .atlas {
    margin: 0;
  }
}
</style>